<template>
	<view class="ability-container">
		<!-- 顶部标题栏 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">能力图鉴</text>
				<text class="header-subtitle">探索各种觉醒能力的奥秘</text>
			</view>
		</view>

		<!-- 能力分类列表 -->
		<scroll-view class="ability-scroll" scroll-y enable-back-to-top>
			<view class="ability-list">
				<view 
					v-for="ability in abilityList" 
					:key="ability.id" 
					class="ability-card"
					@click="handleAbilityClick(ability)"
				>
					<!-- 能力图标和名称 -->
					<view class="card-header">
						<view class="ability-icon-wrapper" :style="{ background: ability.gradient }">
							<text class="ability-icon">{{ ability.icon }}</text>
						</view>
						<view class="ability-info">
							<text class="ability-name">{{ ability.name }}</text>
							<text class="ability-type">{{ ability.type }}</text>
						</view>
					</view>

					<!-- 能力描述 -->
					<text class="ability-description">{{ ability.description }}</text>

					<!-- 能力等级和人数 -->
					<view class="card-footer">
						<view class="ability-stats">
							<text class="stat-item">
								<text class="stat-icon">⭐</text>
								<text class="stat-text">等级: {{ ability.level }}</text>
							</text>
							<text class="stat-item">
								<text class="stat-icon">👥</text>
								<text class="stat-text">{{ ability.count }}人觉醒</text>
							</text>
						</view>
						<view class="arrow-icon">
							<text class="arrow">→</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { getAbilityList } from '@/data/ability';
	import type { Ability } from '@/types/ability';

	// 能力列表
	const abilityList = ref<Ability[]>(getAbilityList());

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		return safeAreaTop + 20;
	});

	// 点击能力卡片
	const handleAbilityClick = (ability: Ability) => {
		uni.navigateTo({
			url: `/pages/ability/detail?id=${ability.id}`
		});
	};
</script>

<style lang="scss" scoped>
	.ability-container {
		height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部标题栏
	 */
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: #1a202c;
		display: block;
		margin-bottom: 8rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 500;
	}

	/**
	 * 能力列表滚动区域
	 */
	.ability-scroll {
		flex: 1;
		padding: 24rpx 24rpx 0;
		width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		height: 0;
	}

	.ability-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	/**
	 * 能力卡片
	 */
	.ability-card {
		background: white;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		}
	}

	/**
	 * 卡片头部
	 */
	.card-header {
		display: flex;
		align-items: center;
		gap: 24rpx;
		margin-bottom: 24rpx;
	}

	.ability-icon-wrapper {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
		flex-shrink: 0;
	}

	.ability-icon {
		font-size: 64rpx;
		line-height: 1;
	}

	.ability-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.ability-name {
		font-size: 36rpx;
		font-weight: 800;
		color: #1a202c;
		line-height: 1.2;
	}

	.ability-type {
		font-size: 26rpx;
		color: #667eea;
		font-weight: 600;
	}

	/**
	 * 能力描述
	 */
	.ability-description {
		font-size: 26rpx;
		color: #475569;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 24rpx;
	}

	/**
	 * 卡片底部
	 */
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 16rpx;
		border-top: 2rpx solid #f1f5f9;
	}

	.ability-stats {
		display: flex;
		gap: 24rpx;
		flex: 1;
	}

	.stat-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.stat-icon {
		font-size: 24rpx;
		line-height: 1;
	}

	.stat-text {
		font-size: 24rpx;
		color: #64748b;
		font-weight: 600;
	}

	.arrow-icon {
		width: 48rpx;
		height: 48rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.arrow {
		font-size: 28rpx;
		color: white;
		font-weight: 700;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

